<template>
  <div class="home">
    <div :class="['cell', dataLength == 4 ? 'cell2' : '']">
      <div class="cell-box" v-for="item in serviceAnalysisList" :key="item.prefixText">
        <div>{{ item.prefixText }}</div>
        <div>{{ item.value }}</div>
      </div>
      <div class="cell-box" v-for="item in situationList" :key="item.prefixText">
        <div>{{ item.prefixText }}</div>
        <div>{{ item.value }}</div>
      </div>
    </div>

    <div class="order-container" style="display: flex; justify-content: space-between">
      <div style="width: 200px; padding-top: 65px; flex-shrink: 0">
        <el-card :body-style="{ height: '190px' }">
          <div slot="header">
            <div style="font-weight: bold; text-align: center">今日呼叫分析</div>
          </div>
          <div class="cell-order" v-for="(item, index) in todayAnalysisList" :key="item.name" @click="toOrderPage(index)">
            <div class="tag" :style="{ backgroundColor: colorList[index] }"></div>
            <div>{{ item.name }}</div>
          </div>
        </el-card>
      </div>

      <div style="flex-grow: 1; padding-left: 35px; overflow: hidden">
        <h5 class="title" style="text-align: center">今日订单统计数</h5>
        <el-table :fit="true" border height="291" :data="orderList" style="cursor: pointer" @click.native="toOrderPage(1)">
          <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
          <el-table-column align="center" min-width="200" label="下单时间" prop="createDate"> </el-table-column>
          <el-table-column align="center" min-width="170" label="呼叫器名称" prop="beeperName"> </el-table-column>
          <el-table-column align="center" width="160" label="商户" prop="businessName"> </el-table-column>
          <el-table-column align="center" width="130" label="服务分类" prop="serverClassifyName"> </el-table-column>
          <el-table-column align="center" min-width="150" label="服务详情" prop="serverName"> </el-table-column>
          <el-table-column align="center" width="100" label="状态">
            <template slot-scope="scope">
              <div>待接单</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
<!--    <div class="echarts-wrapper">
      <div class="chart-wrapper__pie" v-show="villageOrderChartVisible">
        <div id="village-pie__chart"></div>
      </div>
      <div :class="{ 'chart-wrapper__bar': true, 'chart-wrapper__bar2': villageOrderChartVisible ? false : true }">
        <div class="content">
          <el-dropdown class="drop">
            <el-button type="primary" size="small"> {{ monthLabel }} <i class="el-icon-arrow-down el-icon&#45;&#45;right"></i></el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item v-for="item in months" :key="item.value" @click.native="getMonth(item)">
                {{ item.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <el-empty class="empty" :image-size="200" v-show="businessData.length == 0"></el-empty>
          <div id="business-bar__chart" style="height: 500px"></div>
        </div>
      </div>
    </div>-->
  </div>

  <!-- <el-image class="home-bg" src="https://open.imou.com/_nuxt/img/pic_laorenwaichu.7411d57.png" fit="cover"></el-image> -->
</template>

<script>
import HomeApi from '@/api/home/home';
import * as echarts from 'echarts';
import { getStorage } from '@/utils/auth';
import { USER_INFO } from '@/constants/storeName';

export default {
  data() {
    return {
      userRole: '',
      detailRole: '',
      serviceAnalysisList: [],
      situationList: [],
      todayAnalysisList: [],
      orderList: [],
      colorList: ['#23B7E5', '#83BFF6', '#564AA3', '#43BDC6'],
      months: [
        { value: 0, label: '所有月份' },
        { value: 1, label: '一月' },
        { value: 2, label: '二月' },
        { value: 3, label: '三月' },
        { value: 4, label: '四月' },
        { value: 5, label: '五月' },
        { value: 6, label: '六月' },
        { value: 7, label: '七月' },
        { value: 8, label: '八月' },
        { value: 9, label: '九月' },
        { value: 10, label: '十月' },
        { value: 11, label: '十一月' },
        { value: 12, label: '十二月' },
      ],
      monthLabel: '一月',
      monthValue: 1,
      villageData: [],
      businessData: [],
    };
  },

  mounted() {
    this.init();
  },

  computed: {
    dataLength() {
      return this.serviceAnalysisList.length + this.situationList.length;
    },
    villageOrderChartVisible() {
      return this.userRole == 1 && this.detailRole == 1;
    }
  },
  methods: {
    init() {
      this.userRole = getStorage(USER_INFO).userRole;
      this.detailRole = getStorage(USER_INFO).detailRole;
      let month = new Date().getMonth() + 1;
      this.monthValue = month;
      this.monthLabel = this.months.find((item) => item.value == month).label;
      HomeApi.serviceAnalysisCms().then((res) => {
        this.serviceAnalysisList = res.data;
      });
      HomeApi.situationCms().then((res) => {
        this.situationList = res.data;
      });
      HomeApi.todayAnalysisCms().then((res) => {
        this.todayAnalysisList = res.data;
      });
      HomeApi.receivedOrderLimitFive().then((res) => {
        this.orderList = res.data;
      });
      //  只有超级管理员有小区订单数据
      /*if (this.villageOrderChartVisible) {
        HomeApi.getVillageOrder().then((res) => {
          this.villageData = res.data;
          this.getVillagePieChart();
        });
      }*/
      // 超级管理员和社区管理员有商户订单数据
      // if(this.businessOrderChartVisible){
      //this.getBusinessData();
      // }
    },
    // 生成小区饼状图
    getVillagePieChart() {
      this.$nextTick(() => {
        let name = this.villageData.map((item) => item.name);
        let villagePieChart = echarts.init(document.getElementById('village-pie__chart'));
        let option = {
          legend: {
            top: '8%',
            textStyle: {
              fontSize: 12,
            },
            data: name,
          },
          title: {
            text: '小区订单数排行',
            left: 'center',
          },
          tooltip: {
            trigger: 'item',
          },
          grid: {
            top: '10%',
          },
          series: [
            {
              label: {
                name: '比例',
                formatter: '{name|{b}} \n 订单数量：{value|{c}}',
                lineHeight: 24,
                rich: {
                  name: {
                    fontSize: 14,
                    // color: "#666",
                    align: 'center',
                  },
                  value: {
                    fontSize: 18,
                    color: '#5c8ef3',
                    align: 'center',
                  },
                },
              },
              type: 'pie',
              radius: '50%',
              avoidLabelOverlap: false,
              data: this.villageData,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
              },
            },
          ],
        };
        villagePieChart.setOption(option);
      });
    },
    // 生成商户柱状图
    getBusinessBarChart() {
      this.$nextTick(() => {
        let name = this.businessData.map((item) => item.name);
        let businessBarChart = echarts.init(document.getElementById('business-bar__chart'));
        let option = {
          title: {
            text: '商户订单数排行',
            left: 'center',
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow',
            },
          },
          length: {},
          xAxis: {
            type: 'category',
            data: name,
            name: this.businessData.length > 0 ? '商户名称' : '',
            // splitLine:{
            //     show:false
            // }
            axisLine: {
              show: this.businessData.length > 0 ? true : false,
            },
            axisLabel: {
              interval: 0,
              rotate: 40,
            },
          },
          yAxis: {
            type: 'value',
            name: this.businessData.length > 0 ? '商户订单数' : '',
            minInterval: 1,
            // axisTick:{
            //     show:false
            // },
            // axisTick:{
            //     show:false
            // },
            // axisTick:false,
            // splitLine:false,
            // splitLine:{
            //     show:false
            // },
          },
          series: [
            {
              type: 'bar',
              barWidth: 40,
              itemStyle: {
                normal: {
                  color: '#5470C6',
                  label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                      // color: 'black',
                      fontSize: 12,
                    },
                  },
                },
              },
              data: this.businessData,
            },
          ],
        };
        businessBarChart.setOption(option);
      });
    },
    // 获取商户订单数据

    getBusinessData() {
      let params = {
        month: this.monthValue ? this.monthValue : null,
      };
      HomeApi.getBusinessOrder(params).then((res) => {
        this.businessData = res.data;
        this.getBusinessBarChart();
      });
    },
    getMonth(obj) {
      (this.monthLabel = obj.label), (this.monthValue = obj.value);
      this.getBusinessData();
    },
    toOrderPage(index) {
      let orderState = undefined;
      if (index == 0) {
        orderState = 20;
      } else if (index == 1) {
        orderState = 1;
      } else if (index == 2) {
        orderState = 15;
      }

      this.$router.push({
        path: '/order/orderManagement',
        query: {
          orderState: orderState,
          today: true,
        },
      });
    },
    socketMessage(data) {
      var msg = '消息';
      var msg = data.msg;
      var source = data.source;
      // source = 1;  系统消息
      // source = 10; 呼叫
      // source = 20; 取消
      if (source == 30) return;
      switch (source) {
        // 呼叫
        case 10:
          this.$notify.info({
            title: msg,
            message: '点击处理',
            onClick: function () {
              this.$router.push({ path: '/order/orderManagement' });
              this.$notify.closeAll();
            },
            duration: 30000,
          });
          this.msgNewOrder();
          break;
        // 取消
        case 20:
          this.$notify.info({
            title: msg,
            onClick: function () {
              this.$notify.closeAll();
            },
            duration: 30000,
          });
          this.msgCancelOrder();
          break;
        default:
          this.$notify.info({
            title: msg,
            onClick: function () {
              this.$notify.closeAll();
            },
            duration: 3000,
          });
          this.msgDingdong();
          break;
      }
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  margin-left: 42px;
  max-width: 1345px;
  min-width: 700px;

  .title {
    font-size: 20px;
    margin: 20px 0;
  }

  .cell {
    font-size: 20px;
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;

    .cell-box {
      color: white;
      font-weight: 900;
      text-align: center;
      padding: 10px;
      width: 130px;
      margin-right: 20px;
      margin-bottom: 10px;
      border-radius: 10px;
      background-color: #2eabfa;
      flex-shrink: 0;
      &:last-of-type {
        margin-right: 0;
      }
    }
  }
  .cell2 {
    justify-content: space-between;
  }
  .order-container {
    font-size: 20px;

    .el-table {
      &::v-deep th {
        background-color: #f2f2f2 !important;
      }
    }

    .cell-order {
      cursor: pointer;
      font-size: 16px;
      display: flex;
      margin: 20px 0;
      .tag {
        width: 34px;
        height: 25px;
        margin-right: 10px;
        border-radius: 5px;
      }
    }
  }

  .echarts-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .chart-wrapper__pie {
      flex-grow: 1;
      padding: 20px 0;

      #village-pie__chart {
        margin: auto;
        width: 500px;
        height: 500px;
      }
    }

    .chart-wrapper__bar {
      flex-grow: 1;
      padding: 20px 0;

      .content {
        position: relative;
        margin: auto;
        width: min-content;

        .drop {
          position: absolute;
          top: -3px;
          left: 59%;
          z-index: 999;
        }

        .empty {
          position: absolute;
          top: 72px;
          left: 50%;
          transform: translateX(-50%);
        }

        #business-bar__chart {
          margin: auto;
          width: 800px;
          height: 500px;
        }
      }
    }
    .chart-wrapper__bar2 {
      width: 100%;
      position: relative;
      .content {
        width: 100%;
        .drop {
          position: absolute;
          left: 56%;
          top: -3px;
          z-index: 999;
        }
        #business-bar__chart {
          width: 100%;
        }
      }
    }
  }
}
// .home-bg{
//   width: 100%;
//   box-sizing: border-box;
//   padding: 20px;
//   vertical-align: bottom;
//   height: calc(100vh - 86px);
// }
</style>
